<template>
  <div>
    <h2 class="text-xl font-bold mb-4 text-gray-800">待办事项列表</h2>
    <ul class="space-y-3">
      <TodoItem 
        v-for="todo in todos" 
        :key="todo.id" 
        :todo="todo" 
        @toggle-todo="handleToggle" 
        @delete-todo="handleDelete"
        @edit-todo="handleEdit"
      />
    </ul>
    <div v-if="todos.length === 0" class="text-gray-500 italic py-4 text-center">
      暂无待办事项，请添加新的待办
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import TodoItem from './TodoItem.vue'

const props = defineProps<{
  todos: { id: number, title: string, completed: boolean, createdAt: Date }[]
}>()

const emits = defineEmits<{
  (e: 'toggle-todo', id: number): void
  (e: 'delete-todo', id: number): void
  (e: 'edit-todo', id: number, title: string): void
}>()

const handleToggle = (id: number) => {
  emits('toggle-todo', id)
}

const handleDelete = (id: number) => {
  emits('delete-todo', id)
}

const handleEdit = (id: number, title: string) => {
  emits('edit-todo', id, title)
}
</script>
  